/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
const queryObj = {
  status: "", //1-待审核，2-审核通过
  channel_id: "", //频道id
  page: 1, //当前页码
  per_page: 2, //每页条数
};

let totalcount = 0;
async function sendQueryObj() {
  const result = await axios({
    url: "/v1_0/mp/articles",
    params: queryObj,
  });

  totalcount = result.data.total_count;
  document.querySelector(".total-count").innerHTML = `共 ${totalcount} 条`;

  const Htmlstr = result.data.results
    .map((item) => {
      // console.log(item);
      return `
              <tr>
                <td>
                ${
                  item.cover.type == 0
                    ? '<img src="https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500" alt="">'
                    : `<img src="${item.cover.images[0]}" alt="">`
                }
                  
                </td>
                <td>${item.title}</td>
                <td>
                ${
                  item.status == 1
                    ? `<span class="badge text-bg-primary">待审核</span>`
                    : `<span class="badge text-bg-success">审核通过</span>`
                }
                </td>
                <td>
                  <span>${item.pubdate}</span>
                </td>
                <td>
                  <span>${item.read_count}</span>
                </td>
                <td>
                  <span>${item.comment_count}</span>
                </td>
                <td>
                  <span>${item.like_count}</span>
                </td>
                <td  data-id = "${item.id}">
                  <i class="bi bi-pencil-square edit"></i>
                  <i class="bi bi-trash3 del"></i>
                </td>
              </tr>
    `;
    })
    .join("");
  document.querySelector(".align-middle").innerHTML = Htmlstr;
}
sendQueryObj();

/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */

// 2.1 设置频道列表数据
async function setChannleList() {
  const result = await axios({
    url: "/v1_0/channels",
  });

  const listdata = result.data.channels;
  const liststr = listdata.map((item) => {
    return `<option value="${item.id}">${item.name}</option>`;
  });
  document.querySelector(".form-select").innerHTML =
    `<option value="" selected="">请选择文章频道</option>` + liststr.join("");
}
setChannleList();

//状态监听
//  2.2 监听筛选条件改变，保存查询信息到查询参数对象
document.querySelectorAll(".form-check").forEach((item) => {
  item.addEventListener("change", (e) => {
    // console.log(e.target.value);
    queryObj.status = e.target.value;
  });
});

//频道id监听
document.querySelector(".form-select").addEventListener("change", (e) => {
  // console.log(e.target.value);
  queryObj.channel_id = e.target.value;
});

document.querySelector(".sel-btn").addEventListener("click", () => {
  sendQueryObj();
});

/**
//  * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */

//单击下一页功能
document.querySelector(".next").addEventListener("click", () => {
  //通过总条数/条数获得总页数
  if (queryObj.page < Math.ceil(totalcount / queryObj.per_page)) {
    queryObj.page++;
    document.querySelector(".page-now").innerHTML = `第${queryObj.page}页`;
    sendQueryObj();
  }
});

//单击上一页功能
document.querySelector(".last").addEventListener("click", () => {
  if (queryObj.page > 1) {
    queryObj.page--;
    document.querySelector(".page-now").innerHTML = `第${queryObj.page}页`;
    sendQueryObj();
  }
});
/**
 * 目标4：删除功能z
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */

// 删除-事件委托
document.querySelector(".art-list").addEventListener("click", async (e) => {
  //使用classList判断是否包含del标签
  if (e.target.classList.contains("del")) {
    //获取自定义标签dataset中id的值
    const data = e.target.parentNode.dataset.id;
    // console.log(data);

    //将id提交服务器删除
    const result = await axios({
      url: `/v1_0/mp/articles/${data}`,
      method: "DELETE",
    });

    //bug修复，删除当前页最后一条时，页数--，且第一页不受限制
    const children = document.querySelector(".art-list").children;
    if (children.length === 1 && queryObj.page != 1) {
      queryObj.page--;
      document.querySelector(".page-now").innerHTML = `第 ${queryObj.page} 页`;
    }
    sendQueryObj();
  }
});

// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector(".art-list").addEventListener("click", (e) => {
  if (e.target.classList.contains("edit")) {
    const id = e.target.parentNode.dataset.id;
    location.href = `../publish/index.html?id=${id}`;
  }
});
